<form action="<?php echo $this->config->item('baseUrl') ?>Register_User/get_data" method="post">
    <div>
        <h1>
            To register, please fill in the following information :
            <br>
        </h1>

        <div id = "username">
            <label for="user">Your Username:</label>
            <input id="user" type="text" name="username" placeholder="your username here" autofocus = "on" maxlength ="16" min ="4" onchange="check_username()" onkeyup="check_username()" required pattern="[a-zA-Z0-9_.]+"/>
            <label for="user" id="userstatus">insert a name</label>
        </div>
        <div id = "email">
            <label for="email">Your e-mail:</label>
            <input id="emailbox" type="email" name="useremail" placeholder="your email here" onchange="check_email()" onkeyup="check_email()" required pattern="[a-zA-Z0-9_.]+@[a-zA-Z.]+\.[a-zA-Z]+"/>
            <label for="email" id="emailstatus">insert an email</label>
        </div>
        <div id = "password">
            <label for="pass">Your Password:</label>
            <input id="pass" type="password" name="password" placeholder="your password here" min="4" maxlength ="16" autocomplete ="off" onkeyup="check_password_match()" required pattern="[a-zA-Z0-9_.]+"/>
        </div>
        <div id = "password">
            <label for="reppass">Repeat Your Password:</label>
            <input id="reppass" type="password" name="reppassword" placeholder="your password here" min="4" maxlength ="16" autocomplete ="off" onkeyup="check_password_match()" required pattern="[a-zA-Z0-9_.]+"/>
        </div>

        <label for="reppass" id="replab">Insert a password</label>
    </div>

    <button type="submit" id="but" disabled="true">Register</button>

</form>

<script>

    var baseURL = "<?php echo base_url() ?>index.php/"

    function check_password_match()
    {
        var f = $("#pass").val();
        var s = $("#reppass").val();

        if(f.localeCompare(s) != 0)
        {
            $("#but").attr("disabled", true);
            $("#replab").html("Passwords don't match");
        }
        else
        {
            $("#but").attr("disabled", false);
            $("#replab").html("Passwords match");
        }
    }

    function check_username()
    {
        var un = $("#user").val();

        $.ajax({
            "type" : "POST",
            "url"  : baseURL + "AjaxController/check_user",
            "data" : {target: un},
            "success" : function(response) {

                if(response == 'true')
                {
                    $("#but").attr("disabled", true);
                    $("#userstatus").html("username not available");
                }
                else
                {
                    $("#but").attr("disabled", false);
                    $("#userstatus").html("username available");
                }
            },
            "error" : function() { }
        })
    }

    function check_email()
    {
        var un = $("#emailbox").val();

        $.ajax({
            "type" : "POST",
            "url"  : baseURL + "AjaxController/check_email",
            "data" : {target: un},
            "success" : function(response) {

                if(response == 'true')
                {
                    $("#but").attr("disabled", true);
                    $("#emailstatus").html("email not available");
                }
                else
                {
                    $("#but").attr("disabled", false);
                    $("#emailstatus").html("email available");
                }
            },
            "error" : function() { }
        })
    }

</script>